@bili: 15;

@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @bili
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @bili
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @bili
    }
}

@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @bili
    }
}

@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @bili
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @bili
    }
}

@basefont: 750px / @bili;

body {

    max-width: 750rem / @basefont;
    margin: 0 auto;
    background-color: #f6f6f6;
    // height: 9000px;
    // border-left: 1px solid #f00;
    // border-right: 1px solid #f00;
}

// 头部开始样式开始
.header {
    display: flex;
    height: 88rem / @basefont;
    position: fixed;
    width: 750rem / @basefont;
    align-items: center;
    background-color: transparent;

    .feng-lei {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rem / @basefont;
        height: 80rem / @basefont;

        img {
            width: 40rem / @basefont;
        }

    }

    .shou-sou {
        display: flex;
        align-items: center;
        flex: 1;
        height: 60rem / @basefont;
        font-size: 24rem / @basefont;
        color: #757587;
        background-color: rgba(255, 255, 255, 0.81);
        border-radius: 30rem / @basefont;

        &::before {
            content: "";
            height: 30rem / @basefont;
            width: 30rem / @basefont;
            margin-left: 22rem / @basefont;
            margin-right: 15rem / @basefont;
            background: url(../images/icon_search.png);
            background-size: contain;
        }
    }

    .deng-lu {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80rem / @basefont;
        height: 80rem / @basefont;
        font-size: 28rem / @basefont;
        color: #fff;
    }
}

// 头部开始样式结束

// 轮播图样式开始
.lun-bo {
    height: 368rem / @basefont;
}

// 轮播图样式结束

// 楼层样式开始
.lou-cheng {
    height: 324rem / @basefont;
    background-color: #fff;

    a {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 22rem / @basefont;
        margin-top: 24rem / @basefont;

        img {
            width: 86rem / @basefont;
            height: 86rem / @basefont;
        }
    }

}

// 楼层样式结束
// 热门活动开始
.bai-wang {
    height: 200rem / @basefont;
}

// 热门活动结束
// 苏宁头条样式开始
.tou-tiao {
    height: 100rem / @basefont;
    background-color: #fff;
    align-items: center;
    margin: 3rem / @basefont 24rem / @basefont 0 24rem / @basefont;
    border-radius: 10rem / @basefont;
    overflow: hidden;

    .shuning-toutiao {
        width: 55rem / @basefont;
        height: 55rem / @basefont;
        margin-left: 27rem / @basefont;
        margin-right: 30rem / @basefont;
    }

    .huo-dongbao {
        li {
            display: flex;
            align-items: center;

            div {
                display: flex;
                flex: 1;
                flex-direction: column;
                font-size: 24rem / @basefont;

                span {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;

                    &::before {
                        content: "热门";
                        padding: 2rem / @basefont 5rem / @basefont;
                        font-size: 18rem / @basefont;
                        color: #fff;
                        background-image: linear-gradient(to right,
                                #fc8c0c,
                                #ff710e);
                        border-radius: 100rem / @basefont;
                    }
                }
            }

            .wa-zi {
                width: 100rem / @basefont;
                height: 100rem / @basefont;
            }
        }
    }
}

// 苏宁头条样式结束

// 新人礼包样式开始
.xing-reng {

    div:nth-last-child(-n+2) {
        border-left: 1rem / @basefont solid #f2f2f2;
    }

    .xingreng-shan {
        height: 160rem / @basefont;
        border-bottom: 1rem / @basefont solid #f2f2f2;

    }

    .xinghui-yuan {
        height: 250rem / @basefont;
        padding-top: 25rem / @basefont;
        padding-left: 20rem / @basefont;

        h2 {
            font-size: 30rem / @basefont;
            font-weight: normal;
            color: #ff6a0c;
        }

        p {
            font-size: 24rem / @basefont;
            color: #fa4b49;
        }

        .nei-yong {
            border-left: none;

            img {
                width: 140rem / @basefont;
            }
        }
    }
}

// 新人礼包样式结束
// 限时抢购样式开始
.xian-shi {


    .xianshi-qian {
        padding: 23rem / @basefont 0 0 25rem / @basefont;
        height: 275rem / @basefont;
        flex-direction: column;

        .biao-ti {
            margin-bottom: 7rem / @basefont;
            align-items: center;

            .suning-col {
                color: #fa4b49;
            }

            h2 {
                font-size: 32rem / @basefont;
                font-weight: normal;
            }

            p {
                display: flex;
                color: #fff;
                margin-left: 12rem / @basefont;
                font-size: 20rem / @basefont;
                align-items: center;
                border-radius: 100rem / @basefont;
                padding: 8rem / @basefont 14rem / @basefont 5rem / @basefont 0;
                background-image: linear-gradient(to right, #ff7c28, #ff4d4d);

                &::before {
                    content: "";
                    height: 9rem / @basefont;
                    width: 9rem / @basefont;
                    margin: 0 5rem / @basefont 0 8rem / @basefont;
                    background-color: #ffbd93;
                    border-radius: 50%;
                }
            }
        }

        .shi-jiang {
            .zi-ti {
                font-size: 22rem / @basefont;
                color: #bccfe5;
            }

            .miao-shi {
                align-items: center;
                font-size: 14rem / @basefont;
                padding-left: 8rem / @basefont;

                span {
                    margin: 0 2rem / @basefont;
                }

                p {
                    color: #fff;
                    padding: 7rem / @basefont 9rem / @basefont;
                    background-color: #333333;
                    border-radius: 10rem / @basefont;
                }
            }
        }

        .yi-fu {
            margin-top: 8rem / @basefont;

            li {
                flex-direction: column;
                align-items: center;

                .haochi-de {
                    font-size: 24rem / @basefont;
                    color: #ff6a0c;
                }

                p {
                    font-size: 20rem / @basefont;
                    color: #ff4400;
                    margin-top: 5rem / @basefont;
                    padding-left: 20rem / @basefont;
                }

                img {
                    width: 100rem / @basefont;
                    height: 100rem / @basefont;
                }

                .tupian {
                    width: 126rem / @basefont;
                    height: 126rem / @basefont;
                }
            }
        }
    }
}

// 限时抢购样式结束
// 超值预售样式开始
.ding-jing {
    height: 198rem / @basefont;
}

.jia-dian {
    height: 310rem / @basefont;
    border-radius: 15rem / @basefont;
    background-color: #1c4be0;

    li {
        display: flex;

        div {
            padding-top: 31rem / @basefont;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            font-size: 28rem / @basefont;

            .teo21 {
                font-size: 21rem / @basefont;
            }
        }

        a {
            height: 300rem / @basefont;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 30rem / @basefont;



            img {
                width: 130rem / @basefont;
                height: 130rem / @basefont;
            }

            &.dian-mo {
                background: url(../uploads/156577254459727727.png) no-repeat;
                background-size: 187rem / @basefont 300rem / @basefont;
                padding-left: 16rem / @basefont;
            }

            &.sheng-huo {
                background: url(../uploads/156577262211842315.png) no-repeat;
                background-size: 187rem / @basefont 300rem / @basefont;
            }

            &.xion-ying {
                background: url(../uploads/156577266979356152.png) no-repeat;
                background-size: 187rem / @basefont 300rem / @basefont;
            }

            &.dianshi-jia {
                background: url(../uploads/156577276167249812.png) no-repeat;
                background-size: 187rem / @basefont 300rem / @basefont;
                padding-right: 16rem / @basefont;
            }

        }
    }

}

// 超值预售样式结束
// 每日必逛样式开始
.meiri-logo {
    height: 60rem / @basefont;
    padding-left: 24rem / @basefont;
}

.meir-biguan {
    margin-top: 0;

    li {
        height: 250rem / @basefont;
        padding: 22rem / @basefont 0 0 24rem / @basefont;

        .nu-bi {
            color: #ff6600;
        }

        p {
            font-size: 23rem / @basefont;
            color: #999999;
        }

        &.rgong-neng {
            background: url(../uploads/154175458289394786.jpg) no-repeat;
            background-size: cover;
        }

        .xing-ping {
            display: flex;
            align-items: center;

            h2 {
                font-size: 31rem / @basefont;
                color: #ff4976;
                margin-right: 10rem / @basefont;
                font-weight: normal;

                &.zhineng-one1 {
                    color: #fff;
                }

                &.diang-nao {
                    font-size: 28rem / @basefont;
                    color: #595959;
                }
            }

            span {
                display: flex;
                font-size: 21rem / @basefont;
                align-items: center;
                color: #fff;
                border-radius: 100rem / @basefont;
                padding: 5rem / @basefont 14rem / @basefont 5rem / @basefont 0;
                background-image: linear-gradient(to right, #ff4c83, #fa3c2a);

                &.iphone {
                    font-size: 16rem / @basefont;
                }

                &::before {
                    content: "";
                    width: 10rem / @basefont;
                    height: 10rem / @basefont;
                    border-radius: 50%;
                    margin-left: 8rem / @basefont;
                    margin-right: 6rem / @basefont;
                    background-color: #fea5c2;

                }
            }
        }

        a {
            display: flex;
            justify-content: center;

            img {
                padding-top: 10rem / @basefont;
                width: 138rem / @basefont;
            }
        }
    }
}

// 每日必逛样式结束
// 猜你喜欢样式开始
.caini {
    height: 220rem / @basefont;
}

.caini-xih {
    height: 60rem / @basefont;
}

.foot-one2 {
    margin: 0 24rem / @basefont;
    margin-bottom: 260rem / @basefont;
    


    li {
        display: flex;
        height: 512rem / @basefont;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        height: 512rem / @basefont;
        padding-top: 41rem / @basefont;
        padding-left: 24rem / @basefont;
        border-radius: 25rem / @basefont;
        border-right: 10rem / @basefont solid #f2f2f2;
        border-bottom: 10rem / @basefont solid #f2f2f2;
        &:nth-child(2n){
         border-right: none;
        }
        &:nth-last-child(-n+2){
            border-bottom: none;
        }
        img {
            width: 268rem / @basefont;
            height: 268rem / @basefont;
            
        }

        .zi-ying {
            margin-top: 12rem / @basefont;
            span {
               
                font-size: 28rem / @basefont;
                color: #333333;
                margin-top: 12rem / @basefont;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;

                 &::before{
                content: "自营";
                font-size: 18rem / @basefont;
                color: #fff;
                background-color: #ff5a00;
                padding: 5rem / @basefont 12rem / @basefont;
                border-radius: 100rem / @basefont;
            }
            }
           
        }

        .jia-ge {

            display: flex;
           
            align-self: flex-start;
            flex-direction: column;
            margin-top: 18rem / @basefont;
        
            p{
                font-size: 18rem / @basefont;
                color: #ffb94f;
                border-radius: 100rem / @basefont;
                padding: 5rem / @basefont 12rem / @basefont 1rem / @basefont 10rem / @basefont;
                border: 1rem / @basefont solid #ff5500;
                margin-bottom: 15rem / @basefont;
              
                
            }
            span{
                font-size: 24rem / @basefont;
                color: #ff4400;
            }

        }
    }
}

// 猜你喜欢样式结束
.xia-zai{
    width: 750rem / @basefont;
    height: 150rem / @basefont;
    position: fixed;
    bottom: 100rem / @basefont;

}
// 底部导航开始
.foot-nav {
    position: fixed;
    bottom: 0rem / @basefont;
    width: 750rem / @basefont;
    height: 100rem / @basefont;
    background-color: #fff;
    border-top: 1rem / @basefont solid #ddd;

    li {
        font-size: 20rem / @basefont;

        &.coled {

            span {
                color: #fa0;
            }
        }


        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;

            img {
                width: 41rem / @basefont;
                height: 41rem / @basefont;
            }

        }
    }

}

// 底部导航结束